<template>
  <div>
    <div>
      <FormEdit  :dataForm="formData0" />
    </div>
    <div class="checked-device">
      <div class="checked-device-title"><span>关联指定设备</span></div>
      <h-table-list
        border
        type="local"
        :data="tableData"
        :showPagination="false"
        :columns="columns"
      >
        <!-- <ListOpearteButton /> -->
        <el-button @click="addCheckedDevice">添加设备</el-button>
        <template slot="preview-column" slot-scope="scope">
          <p>{{ scope.row.status }}</p>
        </template>
      </h-table-list>
    </div>
  
  
    <div>
      <FormEdit :dataForm="operateForm0" />
    </div>
    <div>
      <FormEdit :dataForm="operateForm1" />
    </div>
    <div class="check-device-buttons">
      <!-- <el-button type="primary" class="submit_btn" @click="submit">存草稿</el-button> -->
      <el-button type="primary" class="submit_btn" @click="submit">保存</el-button>
      <el-button type="primary" class="submit_btn" @click="submit">取消</el-button>
    </div>
    <DownloadIdentify
      @cancel="cancel"
      @update="addChooseDevices"
      :visible.sync="dialogDeviceVisible"
      title="添加设备"
    >
      <h-table-list
        border
        type="local"
        :data="deviceBasic.records"
        :page-sizes="[10, 20]"
        :columns="column3s"
        :form-options="formOptions2s"
        ref="addCheckDeviceTable"
        @selection-change="handleSelectionChange"
      >
        <template slot="preview-column" slot-scope="scope">
          <p>{{ scope.row.status }}</p>
        </template>
        <template slot="operate-column" slot-scope="scope">
          <tableButton :row="scope.row" />
        </template>
      </h-table-list>
    </DownloadIdentify>
   
  </div>
</template>

<script>
import FormEdit from "@/components/formEdit/index";
import ListOpearteButton from "@/components/AllButton/button2";
import DownloadIdentify from "@/components/FormDialog";
import data from "./const";
import { uniComplexArr } from "@/utils";
import { mapState, mapMutations } from "vuex";
export default {
  components: { FormEdit, ListOpearteButton, DownloadIdentify },
  
  data() {
    return {
      //点检项数据
      productRuleForm: {
        tableData: [
          {
            part: "1", //点检部位
            content: "2", //点检内容
            standard: "", //点检基准 非必须
            method: "", //点检方法 非必须
            upPicFlag: 0, //上传图片 0不上传 1选填 2必填
            upVideoFlag: 0, //上传图片 0不上传 1选填 2必填
          },
        ],
        rules: {
          part: [{ required: true, message: "请选择日期", trigger: "blur" }],
          content: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          standard: [
            { required: true, message: "请输入电话号码", trigger: "blur" },
          ],
          method: [{ required: true, message: "请输入地址", trigger: "blur" }],
          upPicFlag: [
            { required: true, message: "请输入地址", trigger: "blur" },
          ],
          upVideoFlag: [
            { required: true, message: "请输入地址", trigger: "blur" },
          ],
        },
      },
      chooseDevices: [],
      chooseItems: [],
      formOptions2s: {
        inline: true,
        submitBtnText: "查询",
        forms: [
          { prop: "mobile", label: "设备名称" },
          { prop: "mobile", label: "设备编号" },
          {
            prop: "sex",
            label: "设备类别",
            itemType: "select",
            options: [
              { value: "", label: "部门1" },
              { value: 0, label: "部门2" },
              { value: 1, label: "部门3" },
            ],
          },
        ],
      },
      dialogDeviceVisible: false,
      dialogPartVisible: false,
      tableData: [],
      tableData2s: [
        { id: 0, checkContent: "22" },
        { id: 1, checkContent: "22" },
        { id: 2, checkContent: "22" },
      ],
      tableData3s: [],
      data,
      paginationInfo: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
        
          this.$store.dispatch("deviceBasic/setListSearchParams", {
            current: e,
          });
          this.getList(
            Object.assign({}, this.$store.state.deviceBasic.listSearchParams)
          );
        },
        current: 1,
        total: 10 ,
      },
      formData0:data.basicForm0,
      operateForm0:data.operateForm0,
      operateForm1:data.operateForm1,
      columns: [
        { prop: "id", label: "序号", width: 140 },

        {
          prop: "deviceName",
          label: "设备名称",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "assetNumber",
          label: "设备编号",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        { prop: "organName", label: "使用部门", minWidth: 180 },
        { prop: "deviceClass", label: "设备分类", minWidth: 180 },
        {
          prop: "operate",
          label: "操作",
          minWidth: 180,
          slotName: "operate-column",
          fixed: "right",
        },
      ],
      column3s: [
        {  type: "selection", width: 140 },
        { type: "index", label: "序号", width: 140 },

        {
          prop: "deviceName",
          label: "设备名称",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "assetNumber",
          label: "设备编号",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        { prop: "organName", label: "使用部门", minWidth: 180 },
        { prop: "deviceClass", label: "设备类别", minWidth: 180 },
        { prop: "typeName", label: "设备分类", minWidth: 180 },
        //{ prop: "departmentName", label: "责任人", minWidth: 180 },
      ],
    };
  },
  watch:{
   
    
  },
  mounted(){
    //console.log(this.data,"批量导入的表格数据")
    const {fullPath}=this.$route
    const id=localStorage.getItem(fullPath)
    this.getDeviceList(id)
  },
   computed: {
    ...mapState(["deviceBasic","app","supply"]),
  },
  methods: {
    addCheckedDevice() {
      console.log("添加点位设备");
      this.dialogDeviceVisible = true;
    },
    addCheckedItems() {
      console.log("添加点位项目");
      this.dialogPartVisible = true;
    },
    addCheckedNocontentItem() {
      //添加空白点检项
      //this.tableData2s.push({id:this.tableData2s.length})
      this.productRuleForm.tableData.push({
        date: "",
        name: "",
        phone: "",
        address: "",
      });
    },
    handleSelectionChange(row) {
      console.log("选择点检设备", row);
      this.chooseDevices=row
    },
    handleSelectionItemsChange(row) {
      console.log("选择点检项目", row);
      this.chooseItems = row;
    },
    addChooseDevices(row) {
      //console.log(this.chooseDevices);
      this.tableData=this.chooseDevices;
      // this.tableData=uniComplexArr(this.tableData)
      this.dialogDeviceVisible = false;
    },
    async getDeviceList(id){
      await this.$store.dispatch("deviceBasic/requestDeviceList");
      this.paginationInfo.total=this.$store.state.deviceBasic.total
    },
    // 提交数据
    submit() {
      //  console.log(this.$refs);
      // this.$refs["productRuleForm"].validate((valid) => {
      //   console.log(this.$refs["productRuleForm"]);
      //   console.log(valid);
      //   if (valid) {
      //   } else {
      //   }
      // });
      console.log(this.formData0)
      console.log(this.operateForm0)
      console.log(this.operateForm1)
      const assetIds=this.chooseDevices.map(e=>{return e.assetIds})
      const archives={archives:[]}
      const data=Object.assign({},(this.formData0)[0].formModel,assetIds,archives)
      data.productType=(this.formData0)[0].formModel.productType.value
      data.usageType=(this.formData0)[0].formModel.usageType.value
      this.$store.dispatch("supply/saveDeviceInfo",data)
    },
  },
};
</script>

<style lang="scss">
.checked-device{
    background: white;
    margin: 10px 0;
    padding: 20px;
    .checked-device-title{
      margin:10px 0;
      font-size:16px;
    }

}
.check-device-buttons{
  margin:20px 0;
  text-align: center;
}
</style>